<template>
  <div class="dialog">
    <nut-popup
      position="bottom"
      :style="{ height: '60%' }"
      v-model:visible="showBottom"
      lock-scroll:true
      :z-index="2002"
      :lock-scroll="true"
    >
      <div class="paddingBox">
        <div class="popTop jscenter">
          <p>请选择订单</p>
          <nut-image
            :src="getAssetsFile('home/closeIcon.png')"
            @click="closeDialog"
          />
        </div>

        <div class="popCard">
          <template v-for="father in options.list">
            <section v-if="father.list?.length == 1">
              <CARD0 :options="father">
                <slot>
                  <template v-if="father.isChose" v-cloak>
                    <nut-image
                      class="choseItem"
                      :src="getAssetsFile('home/payOrder/chosePay.png')"
                      @click="chosechild(father)"
                  /></template>
                  <template v-else v-cloak>
                    <nut-image
                      class="choseItem"
                      :src="getAssetsFile('home/payOrder/noChose.png')"
                      @click="cancelChild(father)"
                  /></template>
                </slot>
              </CARD0>
            </section>

            <section v-if="father.list?.length >= 2">
              <CARD1>
                <slot>
                  <template v-if="father.isChose" v-cloak>
                    <nut-image
                      class="choseItem"
                      :src="getAssetsFile('home/payOrder/chosePay.png')"
                      @click="chosechild(father)"
                  /></template>
                  <template v-else v-cloak>
                    <nut-image
                      class="choseItem"
                      :src="getAssetsFile('home/payOrder/noChose.png')"
                      @click="cancelChild(father)"
                  /></template>
                </slot>
              </CARD1>
            </section>
          </template>
        </div>

        <p class="noMore">没有更多了</p>
        <fullFoot :title="'确定'" @click-btn="confirm"></fullFoot>
      </div>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import CARD0 from "./card0.vue";
import CARD1 from "./card1.vue";
import { ref } from "vue";
import { getAssetsFile, isRes } from "@/utils/pub-use";
import fullFoot from "@/views/home/groupLink/components/fullFoot.vue";
let showBottom = ref<boolean>(false);
let currentSelect = ref<number | null>(null);
const props = defineProps<{ options: any }>();
const emits = defineEmits(["confirm"]);
const chosechild = (father: any) => {
  father.isChose = false;
};
const cancelChild = (father: any) => {
  props.options.list.map((gitem: any) => {
    gitem.isChose = false;
  });
  father.isChose = true;
};
const openDialog = () => {
  showBottom.value = true;
};
const closeDialog = () => {
  showBottom.value = false;
  // props.options.list.map((gitem: any) => {
  //   gitem.isChose = false;
  // });
  currentSelect.value = null;
};
const confirm = () => {
  props.options.list.map((gitem: any) => {
    if (gitem.isChose) {
      currentSelect.value = gitem.order_id;
    }
  });
  emits("confirm", currentSelect.value);
};

defineExpose({ openDialog, closeDialog });
</script>

<style lang="scss" scoped>
.dialog {
  :deep(.popup-bottom) {
    border-radius: 40px 40px 0px 0px;
  }
  .popTop {
    background: #fff;
    z-index: 99;
    border-bottom: 1px solid #eeeeee;
    position: fixed;
    left: 30px;
    right: 30px;
    height: 110px;
    p {
      font-weight: 500;
      font-size: 32px;
    }
    .nut-image {
      width: 26px;
      height: 26px;
    }
  }
  .paddingBox {
    padding: 30px;
    padding-bottom: 150px;
    padding-top: 0px;

    .popCard {
      padding-top: 140px;
      section {
        border-bottom: 20px solid #eee;
        .choseItem {
          margin-right: 18px;
          width: 36px;
          height: 36px;
        }
      }
      section:last-child {
        border-bottom: none;
      }
    }
    .noMore {
      margin-top: 40px;
      text-align: center;
      color: #999999;
      font-size: 26px;
      padding-bottom: 78px;
    }
  }
}
</style>
